<template>
    <div :id="id" class="table-template">
        <el-table :height="height" :data="tableList" stripe style="width: 100%" :ref="'table_' + id">
            <el-table-column v-for="(item, index) of columns" :key="index" :prop="item.prop" :label="item.label" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { http } from '@/js/util/connect.js';
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            tableList: [],
            columns: [],
            timer: null,
            originData: [],
            init: false,
            scroll: true
        };
    },
    computed: {
        height() {
            return this.element.style.height.pixel - this.element.style.borderWidth * 2;
        }
    },
    methods: {
        redraw() {
            this.createTable();
        },
        //javascript原生自动滚动
        startScrolling(speed, delay) {
            if (this.timer) {
                window.clearInterval(this.timer);
            }
            let _this = this;
            let rowHeight = 25;
            let grid = this.$refs['table_' + this.id].bodyWrapper.childNodes[0];
            let bodyHeight = parseInt(this.$refs['table_' + this.id].bodyHeight.height.replace('px', ''));
            let setTop = function(top) {
                grid.style.marginTop = top + 'px';
            };
            // 计算行数是否高于组件高度来判断this.scroll是真还是假
            if (rowHeight * this.originData.length > bodyHeight) {
                this.tableList = [...this.originData, ...this.originData];
                this.scroll = true;
            } else {
                this.tableList = [...this.originData];
                this.scroll = false;
            }
            let marginTop = 0;
            setTop(marginTop);
            if (this.init == false) {
                this.init = true;
                grid.onmouseover = function() {
                    if (_this.scroll && _this.timer) {
                        window.clearInterval(_this.timer);
                    }
                };
                grid.onmouseout = function() {
                    if (_this.timer) {
                        window.clearInterval(_this.timer);
                    }
                    if (_this.scroll) {
                        _this.timer = window.setInterval(scrolling, speed);
                    }
                };
            }
            let start = function() {
                if (_this.timer) {
                    window.clearInterval(_this.timer);
                }
                if (_this.scroll) {
                    _this.timer = window.setInterval(scrolling, speed);
                }
            };
            let scrolling = function() {
                marginTop--;
                setTop(marginTop);
                if (Math.abs(marginTop) >= grid.scrollHeight / 2) {
                    marginTop = 0;
                    setTop(marginTop);
                    if (delay > 0) {
                        window.clearInterval(_this.timer);
                        window.setTimeout(start, delay);
                    }
                }
            };
            start();
        },
        transferData(interfaceData, key) {
            let interfaceGridData = [];
            let list = this.getData(interfaceData, key);
            let headerObject = {};
            let headerList = [];
            for (let a in list) {
                for (let b in list[a]) {
                    if (headerObject[b] != true) {
                        headerList.push(b);
                        headerObject[b] = true;
                    }
                }
            }
            interfaceGridData.push(headerList);
            for (let a = 0; a < list.length; a++) {
                interfaceGridData.push([]);
                for (let i = 0; i < headerList.length; i++) {
                    let value = list[a][headerList[i]];
                    if (value == null || value == undefined) {
                        value = '';
                    }
                    interfaceGridData[a + 1].push(value);
                }
            }
            return interfaceGridData;
        },
        getData(data, array) {
            let value = data;
            for (let index = 0; index < array.length; index++) {
                value = value[array[index]];
            }
            if (value == data) {
                return null;
            } else {
                return value;
            }
        },
        createTable() {
            if (this.element.data.type === 'static') {
                this.setTableData(this.element.data.value);
            } else {
                this.setRequestData();
            }
        },
        setRequestData() {
            try {
                let data = http(this.element.data.url, {}, this.element.data.method === '0' ? 'GET' : 'POST');
                let interfaceGridData = this.transferData(data, this.element.data.key);
                this.setTableData(interfaceGridData);
            } catch (error) {
                console.log(error);
            }
        },
        setTableData(data) {
            let value = [];
            let headList = [];
            for (let j = 0; j < this.element.data.field.length; j++) {
                let element = this.element.data.field[j];
                headList.push(element.alias);
            }
            value.push(headList);

            for (let a = 0; a < data.length - 1; a++) {
                let element = data[a + 1];
                value[a + 1] = [];
                for (let b = 0; b < this.element.data.field.length; b++) {
                    value[a + 1].push(element[this.element.data.field[b].index]);
                }
            }

            this.columns = [];
            for (let a = 0; a < headList.length; a++) {
                let element = headList[a];
                this.columns.push({
                    prop: 'h' + a,
                    label: element
                });
            }
            this.originData = [];
            for (let b = 0; b < value.length - 1; b++) {
                let element = value[b + 1];
                let obj = {};
                if (element && element.length) {
                    for (let c = 0; c < element.length; c++) {
                        obj[`h${c}`] = element[c];
                    }
                    this.originData.push(obj);
                }
            }
            this.$nextTick(() => {
                this.startScrolling(this.element.attribute.interval, 0);
            });
        }
    },
    created() {
        register.addComponent(this);
    },
    mounted() {
        this.createTable();
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.table-template {
    ::v-deep .el-tooltip {
        width: 100% !important;
        white-space: pre !important;
    }
    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #8fb2c2;
        color: #ffffff;
    }
    ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
        overflow: hidden;
    }
    ::v-deep .el-table th,
    ::v-deep .el-table tr,
    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td,
    ::v-deep .el-table,
    ::v-deep .el-table__expanded-cell,
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
    ::v-deep .el-table td,
    ::v-deep .el-table th.is-leaf {
        background-color: transparent;
        border: none;
        color: rgb(248, 248, 248);
        font-size: 12px;
    }
    ::v-deep .el-table::before {
        height: 0;
    }
    ::v-deep .el-table td,
    ::v-deep .el-table th {
        padding: 0;
        height: 25px;
    }
    ::v-deep .el-table th {
        color: #97cbff !important;
        border-bottom: 1px solid #4672a4 !important;
    }
    ::v-deep .el-table__header-wrapper {
        margin-bottom: 10px !important;
    }
    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #00000026 !important;
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #0000008c !important;
    }
}
</style>